<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幽灵浮动</title>
    <script src="js/jquery-1.7.2.js"></script>
</head>
<body>
    <style>
        *{padding:0;margin:0;}
        body{
        position:relative;
        background:#90C0F1;
        }
        .ghost{
        width:160px;
        margin:100px auto;
        position:relative;
        animation:ghostUpdown 1s infinite alternate;
        -webkit-animation:ghostUpdown 1s infinite alternate;
        }
        .ghostBody{
        width:140px;
        height:180px;
        background:#fff;
        border-radius:100% 100% 0 0;
        position:relative;
        }
        .ghostEye{
        width:15px;
        height:20px;
        border-radius:100%;
        border:2px solid #061E74;
        background:#061E74;
        box-shadow:inset -2px -2px #fff;
        position:absolute;
        top:60px;
        }
        .left{left:45px}
        .right{right:50px;}
        .ghostMouth{
        width:15px;
        height:20px;
        border-radius:100%;
        border:2px solid #061E74;
        position:absolute;
        top:90px;
        left:70px;
        }
        .ghostWave{
        position:absolute;
        width: 140px;
        height: 20px;
        background-size:25px 20px;
        background-image:radial-gradient(circle at 50% 0%,#fff,71%,transparent 71%);
        }
        .shadow{
        width:140px;
        height:10px;
        border-radius:100%;
        background:#061E74;
        opacity:0.3;
        margin-top:70px;
        animation:shadow 1s infinite alternate;
        -webkit-animation:shadow 1s infinite alternate;
        }
        @keyframes ghostUpdown{
        from{margin-top:100px;}
        to{margin-top:70px;}
        }
        @-webkit-keyframes ghostUpdown{
        from{margin-top:100px;}
        to{margin-top:70px;}
        }
        @keyframes shadow{
        from{margin-top:70px;opacity:0.3;}
        to{margin-top:100px;opacity:0.1;}
        }
        @-webkit-keyframes shadow{
        from{margin-top:70px;opacity:0.3;}
        to{margin-top:100px;opacity:0.1;}
        }
    </style>
    <div class="ghost">
        <div class="ghostBody"></div>
        <div class="ghostEye left"></div>
        <div class="ghostEye right"></div>
        <div class="ghostMouth"></div>
        <div class="ghostWave"></div>
        <div class="shadow"></div>
    </div>
</body>
</html>